<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>组织管理</title>
</head>
<body>
<div layout:fragment="main-container" class="main-container">
    <div class="mdc-layout-grid mdc-layout-grid-dialog__fixed" th:fragment="main-container">
        <form id="form" class="mdc-panel__padding-16" onsubmit="void(0);">
            <input th:if="${_csrf!=null}" type="hidden"
                   th:name="${_csrf.parameterName}"
                   id="_csrf"
                   th:value="${_csrf.token}"/>
            <input type="hidden" th:if="${organize ne null}" th:value="${organize.id}" name="id">
            <div class="mdc-layout-grid__inner mdc-panel__margin-16 mdc-form-field">
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12" tabindex="0">
                    <!--上级组织-->
                    <div class="mdc-select mdc-select--disabled select-width-fixed">
                        <input type="hidden" name="prevId">
                        <i class="mdc-select__dropdown-icon"></i>
                        <!-- 预选 -->
                        <div class="mdc-select__selected-text"
                             th:text="${prev ne null ? prev.name :''}"
                             th:data-value="${prev ne null ? prev.id :'-1'}"></div>
                        <div class="mdc-select__menu mdc-menu mdc-menu-surface select-width-fixed">
                            <ul class="mdc-list">
                                <li class="mdc-list-item mdc-list-item--selected"
                                    th:data-value="${prev ne null ? prev.id : ''}"
                                    th:text="${prev ne null ? prev.name : ''}"></li>
                            </ul>
                        </div>
                        <span class="mdc-floating-label mdc-floating-label--float-above">请选择上级组织</span>
                        <div class="mdc-line-ripple"></div>
                    </div>
                    <!--名称-->
                    <div class="mdc-panel__margin-16">
                        <div class="mdc-text-field mdc-text-field--outlined mdc-text-field-row"
                             data-mdc-auto-init="MDCTextField">
                            <input type="text" id="nameInput" name="name" class="mdc-text-field__input"
                                   maxlength="20"
                                   required
                                   data-validtip="名称不能为空,且小于20个字符"
                                   autocomplete="off"
                                   placeholder="请输入名称"
                                   th:value="${organize ne null?organize.name:''}">
                            <div class="mdc-notched-outline">
                                <div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch">
                                    <label for="nameInput" class="mdc-floating-label">名称</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                        <div class="mdc-text-field-helper-line">
                            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg">
                                *必填</p>
                            <div class="mdc-text-field-character-counter">0 / 20</div>
                        </div>
                    </div>
                    <!--备注-->
                    <div class="mdc-panel__margin-16">
                        <div class="mdc-text-field mdc-text-field--textarea mdc-text-field-row"
                             data-mdc-auto-init="MDCTextField">
                            <div class="mdc-text-field-character-counter">0 / 250</div>
                            <textarea id="remarkInput" name="remark"
                                      class="mdc-text-field__input"
                                      rows="4" cols="40"
                                      maxlength="250" placeholder="请输入备注"
                                      th:text="${organize ne null?organize.remark:''}"
                                      th:value="${organize ne null?organize.remark:''}"></textarea>
                            <div class="mdc-notched-outline">
                                <div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch">
                                    <label for="remarkInput" class="mdc-floating-label">备注</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div layout:fragment="script">
    <script type="text/javascript" th:inline="javascript">
        $(function() {
            let id = [[${organize ne null ? organize.id:''}]];
            new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
            // 初始化input计数器
            new mdc.textField.MDCTextFieldCharacterCounter(document.querySelector('.mdc-text-field-character-counter'));
            // 提交表单
            $('#editBtn').on('click', function() {
                let $form = $('#form');
                let data = {};
                $form.serializeArray().forEach(function(item) {
                    data[item.name] = item.value;
                });
                let textFields = document.querySelectorAll('.mdc-text-field');
                for (let i = 0; i < textFields.length; i++) {
                    console.log(i, textFields[i]);
                    let $input = $(new mdc.textField.MDCTextField(textFields[i]).input_);
                    let value = $input.val();
                    let required = Boolean($input.prop('required'));
                    let minLength = $input.attr('minlength');
                    let maxLength = $input.attr('maxlength');
                    let validTip = $input.attr('data-validtip');
                    let pattern = $input.attr('data-pattern');
                    if (!$.valid(value, !required, minLength, maxLength, validTip || '参数校验失败', pattern)) {
                        $input.focus();
                        return false;
                    }
                }
                console.log(JSON.stringify(data));
                id > 0 ?
                  $.put('/manage/organize/' + id, data, function(res) {
                      res.result === true ? $.alert(res.msg, function() {
                          window.location.href = '/manage/organize/index';
                      }) : $.alert(res.msg);
                  }) : $.post('/manage/organize', data, function(res) {
                      res.result === true ? $.alert(res.msg, function() {
                          window.location.href = '/manage/organize/index';
                      }) : $.alert(res.msg);
                  });
                return false;
            });
        });
    </script>
</div>
</body>
</html>
